<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>项目2</title>
  <style>
    *{margin: 0;padding: 0}
    #screen{
      width:306px;
      height:145px;
      border:1px solid red;
      margin-left: 500px;
      text-align: center;
      line-height: 150px;
    }
    #in_screen{
      width:260px;
      height:110px;
      border: 1px solid red;
      font-size: 2em;
      background-repeat: no-repeat;
    }
    button{
      margin: 6px;
    }
    table{
      border: 1px solid red;
      margin-left: 500px;
    }
    .btnwh{
      width:50px;
      height:50px;
    }
    #btnback,#btn7,#btn4,#btn1,#btn0{
      margin-left: 30px;
    }
    #btn0,#btnplus,#btnminus,#btndian{
      margin-bottom: 30px;
    }
    #btnequal,#btnchu,#btnx,#btnequal{
      margin-right: 30px;
    }
    #btnback,#btnc,{
      margin-top: 30px;
    }
    #btnback{
      background-image: url(../images/images_2/buttonback.jpg);
    }
    #btnc{
      background-image:url(../images/images_2/buttonc.jpg);
    }
    #btn7{
      background-image: url(../images/images_2/button7.jpg);
    }
    #btn8{
      background-image: url(../images/images_2/button8.jpg);
    }
    #btn9{
      background-image: url(../images/images_2/button9.jpg);
    }
    #btn4{
      background-image: url(../images/images_2/button4.jpg);
    }
    #btn5{
      background-image: url(../images/images_2/button5.jpg);
    }
    #btn6{
      background-image: url(../images/images_2/button6.jpg);
    }
    #btnchu{
      background-image: url(../images/images_2/buttonchu.jpg);
    }
    #btn1{
      background-image: url(../images/images_2/button1.jpg);
    }
    #btn2{
      background-image: url(../images/images_2/button2.jpg);
    }
    #btn3{
      background-image: url(../images/images_2/button3.jpg);
    }
    #btnx{
      background-image: url(../images/images_2/buttonchen.jpg);
    }
    #btn0{
      background-image: url(../images/images_2/button0.jpg);
    }
    #btnplus{
      background-image: url(../images/images_2/button+.jpg);
    }
    #btnminus{
      background-image: url(../images/images_2/button-.jpg);
    }
    #btnequal{
      background-image: url(../images/images_2/button=.jpg);
    }
    #btndian{
      background-image: url(../images/images_2/buttondian.jpg);
    }
    #game{
      width:114px;
      height:50px;
      background-image: url(../images/game.jpg);
    }
    @keyframes myAni {
      0% {background-image: url(../images/images_3/run1.jpg);background-position: 0px 10px;}
      12.5% {background-image: url(../images/images_3/run2.jpg);background-position: 30px 10px;}
      25% {background-image: url(../images/images_3/run3.jpg);background-position: 60px 10px;}
      37.5% {background-image: url(../images/images_3/run4.jpg);background-position: 90px 10px;}
      50% {background-image: url(../images/images_3/run5.jpg);background-position: 120px 10px;}
      62.5% {background-image: url(../images/images_3/run6.jpg);background-position: 150px 10px;}
      75% {background-image: url(../images/images_3/run7.jpg);background-position: 180px 10px;}
      87.5% {background-image: url(../images/images_3/run8.jpg);background-position: 210px 10px;}
      100% {background-image: url(../images/images_3/run1.jpg);background-position: 240px 10px;}
    }
  </style>
  <script>
    function back1() {
      document.getElementById("btnback").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function back2() {
      document.getElementById("btnback").style.boxShadow="none";
    }
    function c1() {
      document.getElementById("btnc").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function c2() {
      document.getElementById("btnc").style.boxShadow="none";
    }
    function n71() {
      document.getElementById("btn7").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n72() {
      document.getElementById("btn7").style.boxShadow="none";
    }
    function n81() {
      document.getElementById("btn8").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n82() {
      document.getElementById("btn8").style.boxShadow="none";
    }
    function n91() {
      document.getElementById("btn9").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n92() {
      document.getElementById("btn9").style.boxShadow="none";
    }
    function n41() {
      document.getElementById("btn4").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n42() {
      document.getElementById("btn4").style.boxShadow="none";
    }
    function n51() {
      document.getElementById("btn5").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n52() {
      document.getElementById("btn5").style.boxShadow="none";
    }
    function n61() {
      document.getElementById("btn6").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n62() {
      document.getElementById("btn6").style.boxShadow="none";
    }
    function chu1() {
      document.getElementById("btnchu").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function chu2() {
      document.getElementById("btnchu").style.boxShadow="none";
    }
    function n11() {
      document.getElementById("btn1").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n12() {
      document.getElementById("btn1").style.boxShadow="none";
    }
    function n21() {
      document.getElementById("btn2").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n22() {
      document.getElementById("btn2").style.boxShadow="none";
    }
    function n31() {
      document.getElementById("btn3").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n32() {
      document.getElementById("btn3").style.boxShadow="none";
    }
    function x1() {
      document.getElementById("btnx").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function x2() {
      document.getElementById("btnx").style.boxShadow="none";
    }
    function n01() {
      document.getElementById("btn0").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function n02() {
      document.getElementById("btn0").style.boxShadow="none";
    }
    function plus1() {
      document.getElementById("btnplus").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function plus2() {
      document.getElementById("btnplus").style.boxShadow="none";
    }
    function minus1() {
      document.getElementById("btnminus").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function minus2() {
      document.getElementById("btnminus").style.boxShadow="none";
    }
    function equal1() {
      document.getElementById("btnequal").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function equal2() {
      document.getElementById("btnequal").style.boxShadow="none";
    }
    function dian1() {
      document.getElementById("btndian").style.boxShadow="2.5px 2.5px 0.9px #8b0000";
    }
    function dian2() {
      document.getElementById("btndian").style.boxShadow="none";
    }
  </script>
  <script>
    var result;
    var operator;
    var isPressEqualsKey = false;
    function connectionDigital(control) {
      var txt = document.getElementById("in_screen");
      if(isPressEqualsKey) {
        txt.value = "";
        isPressEqualsKey = false;
      }
      if(txt.value.indexOf(".") > -1 && control.value == '.')
      return false;
      txt.value += control.value;
    }
    function backspace() {
      var txt = document.getElementById("in_screen");
      txt.value = txt.value.substring(0,txt.value.length - 1);
    }
    function clearAll() {
      document.getElementById("in_screen").value = "";
      result = "";
      operator = "";
    }
    function calculation(control) {
      operator = control.value;
      var txt = document.getElementById("in_screen");
      if(txt.value == "")return false;
      result = txt.value;
      txt.value = "";
    }
    function getResult() {
      var opValue;
      var sourseValue = parseFloat(result);
      var txt = document.getElementById("in_screen");
      if(operator == "*")
      opValue = sourseValue * parseFloat(txt.value);
      else if(operator == "/")
      opValue = sourseValue / parseFloat(txt.value);
      else if(operator == "+")
      opValue = sourseValue + parseFloat(txt.value);
      else if(operator == "-")
      opValue = sourseValue - parseFloat(txt.value);

      txt.value = opValue;
      isPressEqualsKey = true;
      result = "";
      opValue = "";
    }
  </script>
  <script>
    function game() {
      document.getElementById("in_screen").style.animation="myAni 1s";
      document.getElementById("in_screen").style.animationIterationCount="100";
    }
  </script>
</head>
<body>
<div id="waike">
  <div id="screen">
    <div><input id="in_screen" readonly="readonly"></div>
  </div>
  <table>
    <tr>
      <td><button id="btnback" class="btnwh" onclick="backspace()" onmousedown="back1()" onmouseup="back2()"></button></td>
      <td><button id="btnc" class="btnwh" onclick="clearAll()" onmousedown="c1()" onmouseup="c2()"></button></td>
      <td colspan="2"><button id="game" onclick="game()" ondblclick="gamemove()"></button></td>
    </tr>
    <tr>
      <td><button id="btn7" class="btnwh" value="7" onclick="connectionDigital(this);" onmousedown="n71()" onmouseup="n72()"></button></td>
      <td><button id="btn8" class="btnwh" value="8" onclick="connectionDigital(this);" onmousedown="n81()" onmouseup="n82()"></button></td>
      <td><button id="btn9" class="btnwh" value="9" onclick="connectionDigital(this);" onmousedown="n91()" onmouseup="n92()"></button></td>
      <td><button id="btnequal" class="btnwh" value="=" onclick="getResult();" onmousedown="equal1()" onmouseup="equal2()"></button></td>
    </tr>
    <tr>
      <td><button id="btn4" class="btnwh" value="4" onclick="connectionDigital(this);" onmousedown="n41()" onmouseup="n42()"></button></td>
      <td><button id="btn5" class="btnwh" value="5" onclick="connectionDigital(this);" onmousedown="n51()" onmouseup="n52()"></button></td>
      <td><button id="btn6" class="btnwh" value="6" onclick="connectionDigital(this);" onmousedown="n61()" onmouseup="n62()"></button></td>
      <td><button id="btnchu" class="btnwh" value="/" onclick="calculation(this);" onmousedown="chu1()" onmouseup="chu2()"></button></td>
    </tr>
    <tr>
      <td><button id="btn1" class="btnwh" value="1" onclick="connectionDigital(this);" onmousedown="n11()" onmouseup="n12()"></button></td>
      <td><button id="btn2" class="btnwh" value="2" onclick="connectionDigital(this);" onmousedown="n21()" onmouseup="n22()"></button></td>
      <td><button id="btn3" class="btnwh" value="3" onclick="connectionDigital(this);" onmousedown="n31()" onmouseup="n32()"></button> </td>
      <td><button id="btnx" class="btnwh" value="*" onclick="calculation(this);" onmousedown="x1()" onmouseup="x2()"></button></td>
    </tr>
    <tr>
      <td><button id="btn0" class="btnwh" value="0" onclick="connectionDigital(this);" onmousedown="n01()" onmouseup="n02()"></button></td>
      <td><button id="btnplus" class="btnwh" value="+" onclick="calculation(this);" onmousedown="plus1()" onmouseup="plus2()"></button></td>
      <td><button id="btnminus" class="btnwh" value="-" onclick="calculation(this);" onmousedown="minus1()" onmouseup="minus2()"></button></td>
      <td><button id="btndian" class="btnwh" value="." onclick="connectionDigital(this);" onmousedown="dian1()" onmouseup="dian2()"></button></td>
    </tr>
  </table>
</div>
</body>
</html>
